<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>电影显示</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/JQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/common.js"></script>
</head>
<body>
	<table id="movieShow" lay-filter="test"></table>
		<script>
			// 必须要导入 table模块 layui.use('table',...)
			layui.use('table', function(){
			  var table = layui.table;
			  // 为表格填充数据
			  table.render({
			    elem: '#movieShow',
			    toolbar: '#toolbarDemo',
			    url: '${pageContext.request.contextPath}/movie/selectAll', //获取数据
			    page: {limit:5,//每页显示1条
		            limits:[1,3,5], //可选每页条数
		            first: '首页', //首页显示文字，默认显示页号
		            last: '尾页',
		            prev: '<em>←</em>', //上一页显示内容，默认显示 > <
		            next: '<i class="layui-icon layui-icon-next"></i>',
		      		layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
		            }, //开启分页 
				cols: [[ //表头
			       {field:'id', title: 'ID', sort: true},
			       {field:'name', title: '电影名'},
			       {field:'onShelfDate', title: '电影上架时间', sort: true},
			       {field:'offShelfDate', title: '电影下架时间', sort: true}, //没定义宽度则占满剩余所有宽度，都不定义则所有列均分
			       {field:'ticketPrice', title: '票价', sort: true},
			       {field:"right",title:"操作",toolbar: '#barDemo'}
			     ]]
			  });
			  
			  //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
		        table.on('tool(test)', function(obj){
		            var data = obj.data; //获得当前行数据
		            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		            var layEvent = obj.event;
		            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
		            if(layEvent === 'del'){ //删除
		                myLayer.confirm('是否要删除该行', function(index){
		                    // 向服务端发送删除请求
		                    // 此处可以发送ajax
		                    var sendData = {id: obj.data.id};
		                    var url = "${pageContext.request.contextPath}/movie/delete";
		                    $.post(url,sendData,function(data){
		                    	if(data == "true"){
									myLayer.successMsg("删除成功!");
								}else{
									myLayer.errorMsg("删除失败!");
								}
		                    	//setTimeout(function(){location.reload()},1000);	//重新加载页面
		                    });
		                	obj.del(); //删除对应行（tr）的DOM结构
		                    layer.close(index);
		                });
		            } else if(layEvent === 'edit'){ //编辑 先查询,再显示,然后更新
		                // 向服务端发送更新请求
		                // 同步更新缓存对应的值
		                var url = '${pageContext.request.contextPath}/movie/selectById?id=' + obj.data.id;
		                $.post(url,{id: obj.data.id},function(data){
			                layer.open({
			                	  title: "修改电影",
			                	  type: 2,
			                	  skin: 'layui-layer-demo', //样式类名
			                	  area: ['600px', '550px'],
			                	  closeBtn: 0, //不显示关闭按钮
			                	  anim: 2,
			                	  shadeClose: true, //开启遮罩关闭
			                	  content: url,
			                	});
		                });
		            }
		        });
			  
		        table.on('toolbar(test)',function(obj){
		        	var event = obj.event;
		        	if(event == 'add'){
		        		layer.open({
							title: "修改电影",
							type: 2,
							skin: 'layui-layer-demo', //样式类名
							area: ['600px', '550px'],
							closeBtn: 0, //不显示关闭按钮
							anim: 2,
							shadeClose: true, //开启遮罩关闭
							content: '${pageContext.request.contextPath}/movie.jsp'
		        		});
		        	}
		        });
			});
		</script>
		<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-sm" lay-event="add">添加电影</button>
		</div>
		</script>
		<script type="text/html" id="barDemo">
    		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
</body>
</html>